<script setup>
import { articleDelete, articleGetlist } from '@/api/article'
import PageContainer from './components/pageContainer.vue'
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { formatDate } from '@/utils/format'
import ChannelSelect from './components/channelSelect.vue'
import ChannelDrawer from './components/channelDrawer.vue'
import ChannelBox from '@/components/channelBox.vue'
import { ElMessage } from 'element-plus'

defineOptions({
  name: 'ArticleManagerIndex',
})

// 控制loading效果
const isLoading = ref(false)

// 标识抽屉
const drawer = ref(false)
// 请求数据对象
const params = ref({
  pagenum: 1,
  pagesize: 5,
  cate_id: '',
  state: '',
})

// 准备总数
const total = ref(0)

// 标识channelBox
const channelBox = ref()
// 准备一个空数据存储返回值
const articleList = ref([])

// 封装方法获取数据
const getArticleList = async () => {
  isLoading.value = true
  const res = await articleGetlist(params.value)
  articleList.value = res.data.data
  isLoading.value = false
  total.value = res.data.total
  console.log(total.value)
}

// 搜索方法
const clickSearch = async () => {
  // 根据最新的数据对象获取数据
  getArticleList()
}

// 重置方法
const resetSearch = () => {
  params.value.cate_id = ''
  params.value.state = ''
  getArticleList()
}

// 发布文章方法
const addChannel = () => {
  drawer.value.open({})
}

// 子组件成功事件
const handleSuccess = () => {
  const pagenum = Math.ceil(total.value / params.value.pagesize)
  params.value.pagenum = pagenum
  // 获取最新数据
  getArticleList()
}

// 子组件编辑成功
const Editsuccess = () => {
  getArticleList()
}

// 子组件删除成功
const delsuccess = () => {
  getArticleList()
}
// 编辑方法
const handleEdit = (row) => {
  drawer.value.open(row)
}

const detail = ref('dd')
// 删除方法
const handleDelete = async (row) => {
  channelBox.value.open(row, detail)
}

// 当页面条数变化
const onSizeChange = (size) => {
  // 将数据条数更新
  params.value.pagesize = size
  // 重新获取数据
  getArticleList()
}
// 当页码改变
const onCurrentChange = (page) => {
  // 将页码更新
  params.value.pagenum = page
  // 重新获取数据
  getArticleList()
}
// 一进页面就调用
getArticleList()
</script>
<template>
  <div>
    <PageContainer :title="'文章管理'">
      <template #extra>
        <el-button type="primary" @click="addChannel">发布文章</el-button>
      </template>
      <template #content>
        <el-form inline>
          <!-- 选择框 -->
          <el-form-item label="文章分类">
            <ChannelSelect v-model="params.cate_id"></ChannelSelect>
          </el-form-item>
          <el-form-item label="文章状态">
            <el-select style="width: 200px" placeholder="请选择" v-model="params.state">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clickSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form>
          <el-table v-loading="isLoading" :data="articleList">
            <el-table-column label="文章标题">
              <template #default="{ row }">
                <el-link type="primary" :underline="false"> {{ row.title }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="分类" prop="cate_name"></el-table-column>
            <el-table-column label="发布时间" prop="pub_date">
              <template #default="{ row }">
                {{ formatDate(row.pub_date) }}
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="state"></el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button
                  circle
                  plain
                  type="primary"
                  :icon="Edit"
                  @click="handleEdit(row)"
                ></el-button>
                <el-button
                  circle
                  plain
                  type="danger"
                  :icon="Delete"
                  @click="handleDelete(row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <el-pagination
          v-model:current-page="params.pagenum"
          v-model:page-size="params.pagesize"
          :page-sizes="[2, 3, 5, 10]"
          :background="true"
          layout="jumper, total, sizes, prev, pager, next "
          :total="total"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
          style="justify-content: flex-end; margin-top: 20px"
        />
      </template>
    </PageContainer>
  </div>
  <ChannelDrawer ref="drawer" @success="handleSuccess" @edit="Editsuccess"></ChannelDrawer>
  <ChannelBox ref="channelBox" @delete="delsuccess"></ChannelBox>
</template>
